<template>
  <div class="app-container">
    <div v-if="active == 0" class="step">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"><div class="title">发布任务</div></el-col>
      </el-row>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="学年" prop="end_date">
          <el-select v-model="ruleForm.time" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期" prop="term">
          <el-select v-model="ruleForm.term" placeholder="请选择">
            <el-option
              v-for="item in termOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期" prop="end_date">
          <el-date-picker
            v-model="ruleForm.end_date"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button v-if="isEdit" @click="nextStep">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="active == 2" class="step">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"><div class="title">上传班级信息表</div></el-col>
      </el-row>
      <el-upload
        ref="student"
        class="upload-demo"
        :action="class_action"
        name="upload_file"
        accept=".xlsx"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :data="{task_id:task_id}"
        :limit="1"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload('student')">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10Mb</div>
      </el-upload>
    </div>
    <div v-else-if="active == 1" class="step">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"><div class="title">上传学生基本信息表</div></el-col>
      </el-row>
      <el-upload
        ref="class"
        class="upload-demo"
        :action="stu_action"
        name="upload_file"
        accept=".xlsx"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList2"
        :auto-upload="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :data="{task_id:task_id}"
        :limit="1"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload('class')">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10Mb</div>
      </el-upload>
    </div>
    <el-steps :space="300" align-center :active="active" finish-status="success">
      <el-step title="发布任务" />
      <el-step title="上传学生基本信息表" />
      <el-step title="上传班级信息表" />
    </el-steps>
  </div>
</template>

<script>
import * as task from '@/api/task'
const Host = process.env.VUE_APP_BASE_URL
export default {
  data() {
    return {
      isEdit: false,
      active: 0,
      task_id: 0,
      options: null,
      termOption: [
        { value: 1 },
        { value: 2 }
      ],
      ruleForm: {
        name: '',
        description: '',
        end_date: '',
        time: null,
        term: 1,
        status: 0
      },
      fileList: [],
      fileList2: [],
      stu_action: Host + '/TaskBLL/uploadStuFile',
      class_action: Host + '/TaskBLL/uploadClassFile',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择学年', trigger: 'blur' }
        ],
        term: [
          { required: true, message: '请选择学期', trigger: 'blur' }
        ],
        end_date: [
          { required: true, message: '请选择截止日期', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.row) {
      console.log(this.$route.query.row)
      this.ruleForm = this.$route.query.row
      this.task_id = this.ruleForm.id
      console.log('task', this.task_id)
      this.isEdit = true
    }
    var year = new Date().getFullYear()
    this.options = [{
      value: year - 1,
      label: year - 1
    }, {
      value: year,
      label: year
    }, {
      value: year + 1,
      label: year + 1
    }]
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm)
          if (this.isEdit) {
            task.edit(this.ruleForm).then(response => {
              console.log(response)
              this.$message({
                message: '操作Success',
                type: 'success'
              })
              this.nextStep()
            })
          } else {
            task.publish(this.ruleForm).then(response => {
              this.task_id = response.data[0].id
              this.$message({
                message: '操作Success',
                type: 'success'
              })
              this.nextStep()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$refs.upload.abort()
      this.$refs.upload.clearFiles()
    },
    submitUpload(name) {
      this.$refs[name].submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    uploadSuccess(response, file, fileList) {
      this.ruleForm.status++
      this.nextStep()
    },
    uploadError(err, file, fileList) {
      console.err(err, file, fileList)
    },
    nextStep() {
      console.log('下一步')
      if (this.ruleForm.status === 1) this.active = 2
      else if (this.ruleForm.status === 0) this.active = 1
      else this.$router.push({ path: './index' })
    }
  }
}
</script>
<style>
.title{
  font-family: Noto Sans SC;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0px;
  text-align: left;
  height: 72px;
}
.step{
  margin-bottom: 60px;
}
</style>
